<template>
  <div class="page news">
    <increase-layer></increase-layer>

    <div class="news-page-title-panel">
      <div class="news-page-title">
        <div class="news-page-title_text">NEWS</div>
      </div>
      <div class="news-page-title2">动态</div>
    </div>

    <scroll-bar class="news-panel">
      <ul
        class="news-list"
        v-infinite-scroll="load"
        :infinite-scroll-delay="500"
        :infinite-scroll-disabled="finished"
      >
        <li v-for="n in news" class="news-item" :key="n._id" @click="preview(n)">
          <img :src="n.image" class="news-img" />
          <div class="news-container">
            <p class="news-title">{{ n.title }}</p>
            <p class="news-date">{{ dateFormat(n.created_at) }}</p>
          </div>
        </li>
      </ul>
      <p class="load-tips" v-if="finished === false">加载中……</p>
    </scroll-bar>

    <div class="news-dialog-modal" v-show="showDetail"></div>
    <div class="news-dialog" v-show="showDetail">
      <app-link type="close" :size="20" class="dialog-close-btn" @click.native="closePreview" />
      <div style="height: 100%;padding: 20px 0;">
        <scroll-bar class="news-dialog-container" viewClass="news-dialog-view">
          <div class="news-dialog-content">
            <p class="news-dialog-title">{{ detailNews.title }}</p>
            <p class="news-dialog-date">{{ dateFormat(detailNews.created_at) }}</p>
            <div style="text-align: center;">
              <img :src="detailNews.image" class="news-dialog-img">
            </div>
          </div>
        </scroll-bar>
      </div>
    </div>
  </div>
</template>

<script>
import ajax from '../req'
import ScrollBar from '../components/scrollbar/scrollbar'

export default {
  name: 'News',
  components: {
    ScrollBar
  },
  data () {
    return {
      news: [],
      finished: false,
      loading: false,
      page: 1, // 加载第几页的数据
      showDetail: false,
      detailNews: { title: '', date: '', image: '' }
    }
  },
  created () {
    this.queryNews(1)
  },
  methods: {
    queryNews (page) {
      if (this.loading === false) {
        this.loading = true
        ajax.getJSON('/news/' + page, (err, res) => {
          if (!err) {
            let news = res.news
            this.news = news
            if (news.length < 10) {
              this.finished = true
            }
            this.page = page
          }
          this.loading = false
        })
      }
    },
    dateFormat (d) {
      let date = new Date(d)
      return date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'
    },
    preview (n) {
      this.detailNews = n
      this.showDetail = true
    },
    closePreview () {
      this.showDetail = false
    },
    load () {
      this.queryNews(this.page + 1)
    }
  }
}
</script>

<style lang="less">
.scrollbar {
  overflow: hidden;
  position: relative;

  .scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }

  .scrollbar-bar_panel {
    position: absolute;
    width: 20px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    z-index: 1;
  }

  .scrollbar-bar_wrapper {
    position: relative;
    height: 100%;
  }

  .scrollbar__bar {
    position: absolute;
    background-color: transparent;
    border-radius: 1px;
  }

  .scrollbar__bar_show {
    background-color: #fbb03b;
  }

  .is-vertical {
    width: 2px;
    height: 100%;
    right: 6px;
  }

  .scrollbar__thumb {
    position: absolute;
    display: block;
    width: 14px;
    right: 0;
    cursor: pointer;
    border-radius: 7px;
    background-color: #dedede;
    z-index: 2;
  }
}

.news {
  background: url("../assets/news_bg.jpg") no-repeat;
  background-size: cover;

  .news-page-title-panel {
    width: 500px;
    margin: 0 auto;
    padding-top: 60px;
    text-align: center;
    color: white;
  }
  .news-page-title {
    font-size: 0;

    &::before,
    &::after {
      content: "";
      display: inline-block;
      height: 1px;
      width: 60px;
      vertical-align: middle;
      background-color: white;
    }
  }

  .news-page-title_text {
    display: inline-block;
    padding: 0 60px;
    font-size: 18px;
    font-weight: bold;
    vertical-align: middle;
  }

  .news-page-title2 {
    font-size: 12px;
    padding: 10px 0;
  }

  .news-panel {
    width: 40%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .news-list {
    list-style-type: none;
    box-sizing: border-box;
    padding-right: 15%;
  }

  .news-item {
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    border-bottom: 1px solid white;
    padding: 10px 5px;
    font-size: 0;
    cursor: pointer;
  }

  .news-img {
    width: 150px;
    height: 100%;
  }

  .news-container {
    display: inline-block;
    width: calc(100% - 170px);
    height: 100%;
    margin-left: 10px;
    position: relative;
    color: white;
  }

  .news-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .news-date {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 12px;
  }

  .load-tips {
    padding: 10px;
    text-align: center;
    color: white;
    font-size: 14px;
  }

  .scrollbar__wrap {
    overflow-x: hidden;
  }

  .news-dialog-modal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 5;
  }

  .news-dialog {
    position: absolute;
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
    z-index: 6;
    background-color: black;
  }

  .news-dialog-container {
    height: 100%;
    margin-right: 100px;
  }

  .news-dialog-view {
    text-align: right;
    margin-right: 120px;
  }

  .news-dialog-content {
    display: inline-block;
    text-align: left;
    color: white;
    width: calc(100% - 200px);
  }

  .news-dialog-title {
    white-space: normal;
    word-wrap: break-word;
  }

  .news-dialog-date {
    font-size: 12px;
    padding: 10px 0;
  }

  .news-dialog-img {
    max-width: 100%;
  }
}
</style>
